<template>
  <div class="main-header">
    <div class="wrap f-sb-c">
      <div id="left" class="f-fs-c">
        <router-link to="/personalCenter" class="f-c-c">
          <el-avatar
            class="a"
            :size="50"
            :src="userInfo.avatar"
          ></el-avatar>
        </router-link>
        <div class="f-c-c" v-if="$store.state.hasLogin">
          <span>欢迎您，</span>
          <router-link to="/personalCenter" class="b">{{
            $store.state.userInfo.nickname
          }}</router-link>
        </div>
        <div v-else>
          <router-link to="/login/psd">去登录</router-link>
          <router-link to="/regist">免费注册</router-link>
        </div>
      </div>
      <nav id="right">
        <router-link to="/">首页</router-link>
        <router-link
          :to="`/brandZone/${brand.id}`"
          v-for="(brand, ind) in brands"
          :key="ind"
          >{{ brand.text }}</router-link
        >
      </nav>
    </div>
  </div>
</template>
<script>
export default {
  name: "mainHeader",
  components: {},
  data() {
    return {
      activeInd: 0,
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    brands() {
      return this.$store.state.brands;
    },
  },
};
</script>
<style lang="scss" scoped>
.main-header {
  color: $color-text-secondary;
  height: 50px;
  background: #eee;
}
a {
  color: $color-text-secondary;
  font-size: 16px;
}
#left {
  // .el-avatar {
  //   margin-right: 2em;
  // }
  a:not(:last-child){
    margin-right: 2em;
  }
}
#right a:not(:last-child) {
  margin-right: 2em;
}
#welcome {
  margin-right: 20px;
}
</style>